<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '@/store';
import { useNurseOrders, useDict } from '@/service';
import { hideLoading, showToast, showLoading, navigateBack, getCurrentInstance } from '@tarojs/taro';
import { SUCCESS_MSG_DURATION } from '@/constants';
import { storeToRefs } from 'pinia';
import { useRouterPush } from '@/composables';
import { useEmitter } from '@/hooks/common';

const emitter = useEmitter();

const { nurseUser } = storeToRefs(useAuthStore());

const {
    router: {
        params: { orderId, amt }
    }
}: any = getCurrentInstance();

const { toPrivacy } = useRouterPush();

const { addRefund } = useNurseOrders();

const { getDict } = useDict();

definePageConfig({
    navigationBarTitleText: '申请退款'
});

const reason: any = ref([]);

const formData = ref<any>({
    description: '',
    reason: ''
});

const ruleForm = ref<any>(null);

async function getData() {
    showLoading({ title: '正在请求数据...' });

    const result = await getDict('nurse_refund_reason');

    if (result && result.length > 0) {
        const newArr = result.map((item: any) => {
            return {
                ...item,
                checked: false
            };
        });
        reason.value = newArr;
    }

    hideLoading();
}
getData();

function clickReason(item: any) {
    reason.value?.forEach((element: any) => {
        element.checked = false;
    });
    item.checked = true;
    formData.value.reason = item.itemText;
}

const submit = async () => {
    const { valid } = await ruleForm.value.validate();

    if (!valid) return;

    ruleForm.value.validate().then(async ({ valid }: any) => {
        if (!valid) return;

        showLoading({ title: '正在提交申请...' });
        const { error } = await addRefund({
            ...formData.value,
            orderId,
            userId: nurseUser.value.id,
            status: '8'
        });
        if (!error) {
            hideLoading();
            showToast({
                title: '提交申请成功',
                icon: 'success',
                duration: SUCCESS_MSG_DURATION
            });
            setTimeout(() => {
                emitter.$emit('order_refresh');
                navigateBack();
            }, 1000);
        }
    });
};
const checkbox = ref(false);
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="申请退款" showLeft /> -->
        <view class="w-375px flex-col-center">
            <nut-form ref="ruleForm" class="w-360px mb-50px" :model-value="formData">
                <nut-form-item class="w-full" label="退款理由" required :rules="[{ required: true, message: '请输入退款理由' }]"
                    prop="reason">
                    <nut-grid class="w-full" :column-num="3" :border="false" :gutter="0">
                        <nut-grid-item v-for="item in reason" class="flex-col-center h-40px" @click="clickReason(item)">
                            <nut-button plain size="mini" :type="item?.checked ? 'success' : 'default'">
                                {{ item.itemText }}
                            </nut-button>
                        </nut-grid-item>
                    </nut-grid>
                </nut-form-item>
                <nut-form-item label="退款说明" prop="description" required
                    :rules="[{ required: true, message: '请输入退款说明' }]">
                    <nut-textarea v-model="formData.description" placeholder="请输入退款说明" />
                </nut-form-item>
            </nut-form>

            <view class="w-full bg-white h-100px z-36 pos-fixed pos-bottom-0px pos-left-0 flex-col-center">
                <view class="px-2 h-1/2 flex-center">
                    <nut-checkbox v-model="checkbox" />
                    <text class="text-11px w-full text-#000">
                        退款前请阅读并同意
                        <i class="text-#059669" @click="toPrivacy('1801503885441933313')">《用户退款协议》</i>
                        中的全部条款内容
                    </text>
                </view>
                <view class="w-full h-1/2 flex justify-around">
                    <nut-button :disabled="!checkbox" class="important:w-160px font-bold text-lg" type="primary"
                        @click="submit">
                        退款申请{{ amt }}
                    </nut-button>
                </view>
            </view>
        </view>
    </basic-layout>
</template>
<style lang="scss">
.h5-img,
.h5-video {
    max-width: 100%;
    height: 100%;
}

.nut-grid-item__content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: var(--nut-grid-item-content-padding, 0px 0px);
    background: var(--nut-grid-item-content-bg-color, var(--nut-white, #fff));
    border: 0 solid var(--nut-grid-border-color, #f5f6f7);
}
</style>
